<template>
	<view>
		<view class="containers">
			<view class="fl" v-if="this.imgurl==null"><image src="https://syh-1.oss-cn-shanghai.aliyuncs.com/nopic.png"></image></view>
			<view class="fl" v-else><image :src="this.imgurl"></image></view>
			<view class="f2">
				<text>{{partnerName}}</text>
			</view>
		</view>
		<view class="container">
			<view class="f1">
				<view class="f1_0"><text class="f1_1">联系人</text> <text class="f1_2">{{contact}}</text></view>
				<view class="f1_0"> <text class="f1_1">手机</text> <text class="f1_2">{{contactPhone}}</text></view>
				<view class="f1_0"> <text class="f1_1">电话</text> <text class="f1_2" v-if="this.officeTelphone===null">{{officeTelphone}}</text><text  class="f1_2" v-else>空</text></view>
				<view class="f1_0"><text class="f1_1">地址</text>  <text class="f1_2">{{detailedAddress}}</text></view>
				<view class="f1_0"> <text class="f1_1">直达</text> <text class="f1_2">{{routeName}}</text></view>
				<view class="f1_0"> <text class="f1_1">覆盖</text> <text class="f1_2">{{purposeName}}</text></view>
			</view>
			<view class="dianhua">
				<text @click="bohao()">电话联系</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contact:'',
				contactPhone:'',
				detailedAddress:'',
				officeTelphone:'',
				partnerName:'',
				purposeName:'',
				routeName:'',
				imgurl:'',
				contactPhone:''
			}
		},
		onLoad(options) {
			this.contact=options.contact
			this.contactPhone=options.contactPhone
			this.detailedAddress=options.detailedAddress
			this.officeTelphone=options.officeTelphone
			this.partnerName=options.partnerName
			this.purposeName=options.purposeName
			this.routeName=options.routeName
			this.imgurl=options.imgurl
			this.contactPhone=options.contactPhone
		},
		methods: {
			// 拨打电话
			 bohao() {
				let phone = this.contactPhone
				uni.makePhoneCall({
					phoneNumber: phone,
					success:(res) =>{
					},
					fail:(res) =>  {
						console.log('打电话失败了');
					}
				})
			},
		}
	}
</script >

<style lang="scss">
page{background-color: #f7f7f7;padding: 0 15upx;}
.container{
	border-radius: 17upx;
	background: #FFFFFF;
	box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
	margin-top: 20upx;
	// display: flex;
	// align-items: center;
	// justify-content: space-between;
	.dianhua{
		width: 633upx;
		height: 81upx;
		background-color: #ef4d3d;
		font-size: 30upx;
		color: #fff;
		text-align: center;
		line-height: 81upx;
		border-radius: 10upx;
		margin: 40upx;
		position: fixed;
	}
}
.f1{
	.f1_0{
		display: flex;
		align-items: center;
	}
	.f1_1{
		width: 200upx;
		margin: 10upx 0;
		padding-left: 10upx;
	}
	.f1_2{
		width: 500upx;
	}
}
.containers{
	height: 160upx;
	border-radius: 17upx;
	background: #FFFFFF;
	box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
	margin-top: 20upx;
	display: flex;
	align-items: center;
}
.fl{
			width: 135upx;
			height: 135upx;
			image{
				margin: 10upx;
				margin-top: -5upx;
				width: 135upx;
				height: 135upx;
			}
		}
		.f2{
			text-align: center;
			margin-left: 100upx;
		}
</style>
